Define your shades up front 預先定義色階

在設計時，不要用CSS自動調整顏色的深淺。這樣容易產生太多相似的顏色。建議提前設計好一組固定的顏色深淺變化。

如何做到這一點？我們來看看具體步驟：

1 Choose the base color first 選擇基本顏色
先選一箇中間色調作為基礎。一個簡單的方法是：選擇適合做按鈕背景的顏色。記住，不用太糾結具體的數值，主要看顏色效果。

2 Finding the edges 確定最深和最淺的顏色
想想顏色的用途：最深的顏色通常用來寫文字，最淺的顏色用來做背景。比如警告提示框就同時用到了深色文字和淺色背景，可以參考這個來選擇。

3 Filling in the gaps 新增中間的顏色
有了最深和最淺的顏色後，就要填補中間的顏色了。一般需要5-9個色階就夠用。
建議用9個級別，編號從100到900：

• 900是最深的

• 500是基礎色

• 100是最淺的

先加入700和300，然後再填補其他空缺（800、600、400、200）。

4 What about greys? 關於灰色
灰色的處理方法類似，但基礎色不是重點。主要是要選好最深的灰色（用於文字）和最淺的灰色（用於背景），然後填補中間的色階。

It’s not a science 選擇顏色不只是按公式來

雖然用數學公式來選擇顏色看起來很方便，但這並不是最好的方法。你可以用前面說的方法作為開始，需要的時候隨時可以調整。

在實際設計中使用這些顏色時，你可能會想改變某些顏色的深淺或鮮豔程度。這時候要相信自己的眼睛，而不是固定的數字。但要注意：儘量不要隨便加入新的顏色。如果總是隨意新增新顏色，那麼制定的顏色系統就沒有意義了。